<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <link
      href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900"
      rel="stylesheet"
    />
    <title>Reflux HTML CSS Template</title>
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
  
    <link rel="stylesheet" href="assets/css/templatemo-style.css" />
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1322325_77jbnv0m7ov.css"
  <body>
    <div id="page-wraper">
      <!-- Sidebar Menu -->
      <div class="responsive-nav">
        <i class="fa fa-bars" id="menu-toggle"></i>
        <div id="menu" class="menu">
          <i class="fa fa-times" id="menu-close"></i>
          <div class="container">
            <div class="image">
              <a href="#"><img src="assets/images/author-image.jpg" alt="" /></a>
            </div>
            <div class="author-content">
              <h4>邹白霜</h4>
              <span>个人主页</span>
            </div>
            <nav class="main-nav" role="navigation">
              <ul class="main-menu">
                <li><a href="#section1">关于我</a></li>
                <li><a href="#section2">苏州之旅</a></li>
                <li><a href="#section3">工作展示</a></li>
                <li><a href="#section4">联系我</a></li>
              </ul>
            </nav>
            <div class="social-network">
              <ul class="soial-icons">
                <li>
                  <a href="https://fb.com/templatemo"
                    ><i class="iconfont">&#xe607;</i
                  ></a>
                </li>
                <li>
                  <a href="#"><i class="iconfont">&#xe601;</i></a>
                </li>
                <li>
                  <a href="#"><i class="iconfont">&#xe600;</i></a>
                </li>
                <li>
                  <a href="#"><i class="iconfont">&#xe606;</i></a>
                </li>
                <li>
                  <a href="#"><i class="iconfont">&#xe66a;</i></a>
                </li>
              </ul>
            </div>
            <div class="copyright-text">
              </div>
          </div>
        </div>
      </div>

      <section class="section about-me" data-section="section1">
        <div class="container">
          <div class="section-heading">
            <h2>关于我</h2>
            <div class="line-dec"></div>
            <span
              >  目前我就读于湖北大学知行学院，即将步入大四。我会活成自己理想中的样子吗？我不知道,所以有所期待。现在的我们，只要踏踏实实走好当下的每一步，我相信，万物可期!</span
            >
          </div>
          <div class="left-image-post">
            <div class="row">
              <div class="col-md-6">
                <div class="left-image">
                  <img src="assets/images/left-image.jpg" alt="" />
                </div>
              </div>
              <div class="col-md-6">
                <div class="right-text">
                  <!-- <h4>Reflux HTML CSS Template</h4> --><br>
                  <p>
                  山塘古镇是苏州著名的江南水乡，城内水港交错，街渠纵横，是唐代大诗人白居易任苏州刺史募工凿河堆堤而成。傍晚的山塘街很有意境。
                  </p>
                  <div class="white-button">
                    <a href="#">更多</a>
                  </div>
                </div> 
              </div>
            </div>
          </div>
          <div class="right-image-post">
            <div class="row">
              <div class="col-md-6">
                <div class="left-text">
                  <h4></h4>
                  <p>
                    个人信息<br>
                    姓名：邹白霜<br>
                    昵称：小白<br>
                    星座：天秤座<br>
                    性别：女<br>
                    年龄：21<br>
                    爱好：运动、旅游、看书、看帅哥<br>
                    爱豆：陈伟霆<br>
    >>把酒祝东风，且住山河与共的从容，似这清风明月，凌霜傲雪，最清澈双眼。
                  </p>
                  <div class="white-button">
                    <!-- <a href="#">更多</a> -->
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="right-image">
                  <img src="assets/images/right-image.jpg" alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="section my-services" data-section="section2">
        <div class="container">
          <div class="section-heading">
            <h2>下一站，Where？</h2>
            <div class="line-dec"></div>
            <span
              >一个人至少拥有一个梦想，有一个理由去坚强。心若没有栖息的地方，到哪里都是流浪。</span
            >
          </div>
          <div class="row">
            <div class="col-md-6">
              <div class="service-item">
                <div class="first-service-icon service-icon"></div>
                <!-- <h4>HTML5 &amp; CSS3</!--> -->
              
                  <img src="assets/images/guzhen.JPG" alt="" />
               
              </div>
            </div>
            <div class="col-md-6">
              <div class="service-item">
                <div class="second-service-icon service-icon"></div>
                <!-- <h4>Creative Ideas</h4> -->
                <img src="assets/images/tup.jpg" alt="">
              </div>
            </div>
            <div class="col-md-6">
              <div class="service-item">
                <div class="third-service-icon service-icon"></div>
                <!-- <h4>Easy Customize</h4> -->
                <p>
                  <img src="assets/images/ws.jpg" alt="">
                </p>
              </div>
            </div>
            <div class="col-md-6">
              <div class="service-item">
                <div class="fourth-service-icon service-icon"></div>
                <!-- <h4>Admin Dashboard</h4> -->
                <p>
                  <img src="assets/images/pinjianglv.JPG" alt="">
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
		<div class="tlinks">Collect from <a href="http://www.cssmoban.com/" >建站模板</a></div>
      <section class="section my-work" data-section="section3">
        <div class="container">
          <div class="section-heading">
            <h2>我的作品</h2>
            <div class="line-dec"></div>
            <span
              >
              前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大</span
            >
          </div>
          <div class="row">
            <div class="isotope-wrapper">
              <form class="isotope-toolbar">
                <label
                  ><input
                    type="radio"
                    data-type="*"
                    checked=""
                    name="isotope-filter"
                  />
                  <span>all</span></label
                >
                <label
                  ><input
                    type="radio"
                    data-type="people"
                    name="isotope-filter"
                  />
                  <span>Past</span></label
                >
                <label
                  ><input
                    type="radio"
                    data-type="nature"
                    name="isotope-filter"
                  />
                  <span>Now</span></label
                >
                <label
                  ><input
                    type="radio"
                    data-type="animals"
                    name="isotope-filter"
                  />
                  <span>Future</span></label
                >
              </form>
              <div class="isotope-box">
                <div class="isotope-item" data-type="nature">
                  <figure class="snip1321">
                    <img
                      src="assets/images/portfolio-01.jpg"style= width:450px;height:300px;
                      alt="sq-sample26"
                      alt="sq-sample26"
                    />
                    <figcaption>
                      <a
                        href="木兮地板/index.html"target ="blank"
                      
                        ><i class="iconfont">&#xe62e;</i
                      ></a>
                      <h4>木兮地板</h4>
                      <span>free to use our template</span>
                    </figcaption>
                  </figure>
                </div>

                <div class="isotope-item" data-type="people">
                  <figure class="snip1321">
                    <img
                      src="assets/images/portfolio-02.jpg"style= width:450px;height:300px;
                      alt="sq-sample26"
                      alt="sq-sample26"
                    />
                    <figcaption>
                      <a
                        href="个人网站/index.html"target ="blank"
                      
                        ><i class="iconfont">&#xe62e;</i
                      ></a>
                      <h4>个人网站</h4>
                      <span>please tell your friends</span>
                    </figcaption>
                  </figure>
                </div>

                <div class="isotope-item" data-type="animals">
                  <figure class="snip1321">
                    <img
                      src="assets/images/portfolio-03.jpg"style= width:450px;height:300px;
                      alt="sq-sample26"
                      alt="sq-sample26"
                    />
                    <figcaption>
                      <a
                        href="关于远大/index.html  "target ="blank"
                     
                        ><i class="iconfont">&#xe62e;</i
                      ></a>
                      <h4>关于远大</h4>
                      <span>customize anything</span>
                    </figcaption>
                  </figure>
                </div>

                <div class="isotope-item" data-type="people">
                  <figure class="snip1321">
                    <img
                      src="assets/images/portfolio-04.jpg"style= width:450px;height:300px;
                      alt="sq-sample26"
                      alt="sq-sample26"
                    />
                    <figcaption>
                      <a
                        href="小米商城/index.html"target ="blank"
                       
                        ><i class="iconfont">&#xe62e;</i
                      ></a>
                      <h4>小米商城</h4>
                      <span>Re-distribution not allowed</span>
                    </figcaption>
                  </figure>
                </div>

                <div class="isotope-item" data-type="nature">
                  <figure class="snip1321">
                    <img
                      src="assets/images/portfolio-05.jpg"style= width:450px;height:300px;
                      alt="sq-sample26"
                      alt="sq-sample26"
                    />
                    <figcaption>
                      <a
                        href="day04(3----03)/index.html"target ="blank"
                      
                        ><i class="iconfont">&#xe62e;</i
                      ></a>
                      <h4>家具home</h4>
                      <span>Ut sollicitudin risus</span>
                    </figcaption>
                  </figure>
                </div>

                <div class="isotope-item" data-type="animals">
                  <figure class="snip1321">
                    <img
                      src="assets/images/portfolio-06.jpg"style= width:450px;height:300px;
                      alt="sq-sample26"
                      alt="sq-sample26"
                    />
                    <figcaption>
                      <a
                        href="生活家具/index.html"target ="blank"
                       
                        ><i class="iconfont">&#xe62e;</i
                      ></a>
                      <h4>生活家具</h4>
                      <span>Donec eget massa ante</span>
                    </figcaption>
                  </figure>
                </div>
                <div class="isotope-item" data-type="nature">
                  <figure class="snip1321">
                    <img
                      src="assets/images/xiaomi.jpg"style= width:450px;height:300px;
                      alt="sq-sample26"
                    />
                    <figcaption>
                      <a
                        href="小米官网/index.html"target ="blank"
                     
                        ><i class="iconfont">&#xe62e;</i
                      ></a>
                      <h4>小米商城</h4>
                      <span>Ut sollicitudin risus</span>
                    </figcaption>
                  </figure>
                </div>

                <div class="isotope-item" data-type="animals">
                  <figure class="snip1321">
                    <img
                      src="assets/images/shenghuo.jpg"style= width:450px;height:300px;
                      alt="sq-sample26"
                      alt="sq-sample26"
                    />
                    <figcaption>
                      <a
                        href="生活/index.html"target ="blank"
                       
                        ><i class="iconfont">&#xe62e;</i
                      ></a>
                      <h4>生活</h4>
                      <span>Donec eget massa ante</span>
                    </figcaption>
                  </figure>
                </div>
              </div>
            </div>
          </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
      <section class="section contact-me" data-section="section4">
        <div class="container">
          <div class="section-heading">
            <h2>联系我Yio</h2>
            <div class="line-dec"></div>
            <span
              >我们在活着的每一个瞬间，不管是否意识到，都在做着构成自己生活方式的大大小小的选择样我想要守护的是让自己悠闲无为的时间。
              </span
            >
          </div>
          <div class="row">
            <div class="right-content">
              <div class="container">
                <form id="contact" action="" method="post">
                  <div class="row">
                    <div class="col-md-6">
                      <fieldset>
                        <input
                          name="name"
                          type="text"
                          class="form-control"
                          id="name"
                          placeholder="你的名字......"
                          required=""
                        />
                      </fieldset>
                    </div>
                    <div class="col-md-6">
                      <fieldset>
                        <input
                          name="email"
                          type="text"
                          class="form-control"
                          id="email"
                          placeholder="你的联系方式......"
                          required=""
                        />
                      </fieldset>
                    </div>
                    <div class="col-md-12">
                      <fieldset>
                        <input
                          name="subject"
                          type="text"
                          class="form-control"
                          id="subject"
                          placeholder="兴趣......"
                          required=""
                        />
                      </fieldset>
                    </div>
                    <div class="col-md-12">
                      <fieldset>
                        <textarea
                          name="message"
                          rows="6"
                          class="form-control"
                          id="message"
                          placeholder="你的信息......"
                          required=""
                        ></textarea>
                      </fieldset>
                    </div>
                    <div class="col-md-12">
                      <fieldset>
                        <button type="submit" id="form-submit" class="button">
                          发送
                        </button>
                      </fieldset>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </section>
      
    </div>

    <!-- Scripts -->
    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <script src="assets/js/isotope.min.js"></script>
    <script src="assets/js/owl-carousel.js"></script>
    <script src="assets/js/lightbox.js"></script>
    <script src="assets/js/custom.js"></script>
    <script>
      //according to loftblog tut
      $(".main-menu li:first").addClass("active");

      var showSection = function showSection(section, isAnimate) {
        var direction = section.replace(/#/, ""),
          reqSection = $(".section").filter(
            '[data-section="' + direction + '"]'
          ),
          reqSectionPos = reqSection.offset().top - 0;

        if (isAnimate) {
          $("body, html").animate(
            {
              scrollTop: reqSectionPos
            },
            800
          );
        } else {
          $("body, html").scrollTop(reqSectionPos);
        }
      };

      var checkSection = function checkSection() {
        $(".section").each(function() {
          var $this = $(this),
            topEdge = $this.offset().top - 80,
            bottomEdge = topEdge + $this.height(),
            wScroll = $(window).scrollTop();
          if (topEdge < wScroll && bottomEdge > wScroll) {
            var currentId = $this.data("section"),
              reqLink = $("a").filter("[href*=\\#" + currentId + "]");
            reqLink
              .closest("li")
              .addClass("active")
              .siblings()
              .removeClass("active");
          }
        });
      };

      $(".main-menu").on("click", "a", function(e) {
        e.preventDefault();
        showSection($(this).attr("href"), true);
      });

      $(window).scroll(function() {
        checkSection();
      });
    </script>
  </body>
</html>
